<template>
    <div>
        <!-- <h2>{{ info.name }}-{{ info.age }}</h2> -->
        <h2>{{ name }}-{{ age }}</h2>
        <button @click="changeInfo1">修改info</button>
    </div>
</template>

<script>
import { reactive } from "vue";
export default {
    setup() {
        const info = reactive({ name: "why", age: 18 })
        //解构
        let { name, age } = info


        // const changeInfo = ()=>{
        //     info.name ="lion"
        //     info.age++
        // }
        const changeInfo1 = () => {
            name = "lion"
            age++
            console.log(age);    //在这里是显示修改的,但是在template是不响应的
        }
        return {
            // info,
            name,
            age,
            changeInfo1
        }
    }
}
</script>

<style lang="scss" scoped>
</style>